<template>
  <div class="app-container">
    <el-input v-model="form.name" style="width:200px; margin-bottom:10px" placeholder="请输入新增类名"></el-input>
    <el-button  @click="handleAdd(scope.$index)">保存</el-button>
    <el-table :data="list" style="width: 96%" max-height="500px">
      <el-table-column label="#" width="180" type="index"> </el-table-column>
      <el-table-column label="类名" width="250">
        <template slot-scope="scope">
          <div @dblclick="dblClickHandle(scope)">
            <el-input
              v-model="listIpt"
              v-if="idx == scope.$index"
              @blur="onBlur(scope)"
              v-focus
            ></el-input>
            <el-button v-else size="mini" @click="handleEdit(scope.row)">{{
              scope.row.name
            }}</el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">修改</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  layout: "main",
  data() {
    return {
      input: "",
      listIpt: "",
      idx: null,
      form: {},
    };
  },
  head() {
    return {
      title: "类别管理页面",
    };
  },
  mounted() {
    this.getClassify();
  },
  methods: {
    ...mapActions("classify", ["getClassify"]),
  },
  computed: {
    ...mapState("classify", ["list"]),
  },
};
</script>

<style>
</style>